<div class="modal fade" id="div-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="h-modal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="h-modal">修改用户信息</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body u-card">
                <form id="form-user-img" enctype="multipart/form-data">
                    <!--图片裁剪框 start-->
                    <div style="display: none" class="tailoring-container">
                        <div class="black-cloth" onclick="closeTailor(this)"></div>
                        <div class="tailoring-content">
                            <div class="tailoring-content-one">
                                <label title="上传图片" for="chooseImg" class="btn btn-primary choose-btn">
                                    <input name="file" type="file" accept="image/jpg,image/jpeg,image/png" id="chooseImg" class="hidden" onchange="selectImg(this)">
                                    选择图片
                                </label>
                                <span class="text-danger">仅支持image/jpg,image/jpeg,image/png格式，图片大小限制在2MB内</span>
                                <div class="close-tailoring"  onclick="closeTailor(this)">×</div>
                            </div>
                            <div class="tailoring-content-two">
                                <div class="tailoring-box-parcel">
                                    <img id="tailoringImg">
                                </div>
                                <div class="preview-box-parcel">
                                    <p>图片预览：</p>
                                    <div class="square previewImg"></div>
                                    <div class="circular previewImg"></div>
                                </div>
                            </div>
                            <div class="tailoring-content-three">
                                <button type="button" class="btn btn-warning cropper-reset-btn">复位</button>
                                <button type="button" class="btn btn-warning cropper-rotate-btn">旋转</button>
                                <button type="button" class="btn btn-warning cropper-scaleX-btn">换向</button>
                                <button type="button" class="btn btn-success sureCut" id="sureCut">确定</button>
                            </div>
                        </div>
                    </div>
                </form>
                <form id="form-user-modify" method="post">
                    <ul>
                        <li>
                            <div class="container-fluid row">
                                <div class="col-md-5">
                                    <p><img id="finalImg" style="width: 100px;height: 100px;border-radius: 50%;">
                                    </p>
                                    <button id="replaceImg" type="button" class="btn btn-danger u-btn-modify-img btn-sm">编辑头像</button>
                                </div>

                                <div class="col-md-7">
                                    <nav>
                                        <label>身份:</label>
                                        <span id="span-modal-role" class="text-danger" />
                                    </nav>
                                    <nav>
                                        <label>
                                            性别:
                                        </label>
                                        <input name="gender" id="form-gender-man"  type="radio" value="2">
                                        <label class="p-0" for="form-gender-man" style="background: none">
                                            男
                                        </label>
                                        <input name="gender" id="form-gender-woman" type="radio" value="1">
                                        <label class="p-0" for="form-gender-woman" style="background: none">
                                            女
                                        </label>
                                    </nav>
                                    <nav>
                                        <label for="form-birthday">生日:</label>
                                        <input name="birthdayString" type="date" id="form-birthday">
                                    </nav>
                                </div>
                            </div>
                        </li>

                        <li>
                            <label>名称:</label>
                            <input id="form-name" name="username" type="text">
                            <span style="color: gray; font-size: 10px">* 目前只支持中文，最大长度5</span>
                        </li>
                        <li>
                            <label for="form-phone">联系电话:</label>
                            <input name="phone" id="form-phone" type="text"/>
                            <span style="color: gray; font-size: 10px">* 暂时只支持11位电话</span>
                        </li>
                        <li>
                            <label for="form-province">所在地区:</label>
                            <select name="prov" id="form-province" style="font-size: 10px"></select>
                            <select name="city" style="font-size: 10px"></select>
                            <select name="area" style="font-size: 10px"></select>
                        </li>
                        <li>
                            <label for="form-address">详细地址:</label>
                            <input name="detail" id="form-address" type="text" placeholder="详细地址">
                            <span style="color: gray; font-size: 10px">* 限制在128个字符以内</span>
                        </li>
                    </ul>
                </form>
            </div>
            <div class="modal-footer">
                <button id="btn-modal-cancel" type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">取消</button>
                <button id="btn-modal-ok" type="button" class="btn btn-success btn-sm">确认</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="div-modal-add" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="modal-title" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-title">添加新用户</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body u-card">

                <form id="form-user-add" method="post">
                    <ul>
                        <li>
                            <div class="container-fluid row">
                                <div class="col-md-5">
                                    <p><img id="userImg" th:src="@{/images/user_man.png}" style="width: 100px;height: 100px;border-radius: 50%;">
                                    </p>
                                </div>

                                <div class="col-md-7">
                                    <nav>
                                        <label for="form-role">身份:</label>
                                        <select id="form-role" name="rid">

                                        </select>
                                    </nav>
                                    <nav>
                                        <label>
                                            性别:
                                        </label>
                                        <input name="gender" id="form-gender-man-add"  type="radio" value="2" onclick="changeDefaultImg(2)" checked>
                                        <label class="p-0" for="form-gender-man-add" style="background: none">
                                            男
                                        </label>
                                        <input name="gender" id="form-gender-woman-add" type="radio" value="1" onclick="changeDefaultImg(1)">
                                        <label class="p-0" for="form-gender-woman-add" style="background: none">
                                            女
                                        </label>
                                    </nav>
                                    <nav>
                                        <label for="form-birthday">生日:</label>
                                        <input name="birthdayString" type="date" id="form-birthday-add" value="2022-02-23">
                                    </nav>
                                </div>
                            </div>
                        </li>
                        <li>
                            <label>账号:</label>
                            <input id="form-code-add" name="code" type="text">
                            <span style="color: gray; font-size: 10px">* 目前只支持中文，最大长度5</span>
                        </li>
                        <li>
                            <label>名称:</label>
                            <input id="form-name-add" name="username" type="text">
                            <span style="color: gray; font-size: 10px">* 目前只支持中文，最大长度5</span>
                        </li>
                        <li>
                            <label>密码:</label>
                            <input id="form-password-add" name="pwd" type="password">
                            <span style="color: gray; font-size: 10px">* 不支持特殊符号</span>
                            <button id="btn-change-pw" type="button" onclick="changePasswordShow()" class="btn btn-primary btn-sm">显示</button>
                        </li>
                        <li>
                            <label for="form-phone">联系电话:</label>
                            <input name="phone" id="form-phone-add" type="text"/>
                            <span style="color: gray; font-size: 10px">* 暂时只支持11位电话</span>
                        </li>
                        <li>
                            <label for="form-province">所在地区:</label>
                            <select name="prov" id="form-province-add" style="font-size: 10px"></select>
                            <select name="city" style="font-size: 10px"></select>
                            <select name="area" style="font-size: 10px"></select>
                        </li>
                        <li>
                            <label for="form-address">详细地址:</label>
                            <input name="detail" id="form-address-add" type="text" placeholder="详细地址">
                            <span style="color: gray; font-size: 10px">* 限制在128个字符以内</span>
                        </li>
                    </ul>
                </form>
            </div>
            <div class="modal-footer">
                <button id="btn-modal-cancel-add" type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">取消</button>
                <button id="btn-modal-ok-add" type="button" class="btn btn-success btn-sm" onclick="addUser()">确认</button>
            </div>
        </div>
    </div>
</div>

